<template>
    <p>用户输入的内容：{{ account }}</p>
    <input type="text" v-model="account">
    <button @click="account = 'zhangsan'">修改account</button>

    <p>用户选择的城市：{{ city }}</p>
    <select v-model="city">
        <option value="1">四川</option>
        <option value="2">云南</option>
        <option value="3">贵州</option>
    </select>
    <button @click="city = '1'">修改city</button>

    <p>用户选择的性别：{{ gender }}</p>
    <input type="radio" value="1" v-model="gender"><label>男</label>
    <input type="radio" value="0" v-model="gender"><label>女</label>
    <button @click="gender = '0'">修改gender</button>


    <p>用户选择的状态：{{ agree }}</p>
    <input type="checkbox" v-model="agree"><label>我已阅读并同意以上协议</label>
    <button @click="agree = !agree">修改agree数据</button>

    <p>用户选择的爱好：{{ likes }}</p>
    <input type="checkbox" value="1" v-model="likes"><label>吃饭</label>
    <input type="checkbox" value="2" v-model="likes"><label>睡觉</label>
    <input type="checkbox" value="3" v-model="likes"><label>打游戏</label>
    <button @click="likes.push(3)">添加一个爱好</button>


    <h1>登录</h1>
    <input type="text" v-model="userItem.account">
    <input type="text" v-model="userItem.password">
    <button>登录</button>
</template>

<script setup>
import { ref, watch } from 'vue';
const account = ref('');
const city = ref('2');
const gender = ref('1');
const agree = ref(false);
const likes = ref(["1"]);


const userItem = ref({
    account: '',
    password: ''
})

watch(likes, (newValue, oldValue) => {
    console.log(newValue, oldValue);

    console.log(newValue == oldValue);
})

</script>

<style scoped></style>